<template>
  <div class="container">
    <el-form :model="formData" ref="form" :rules="rules" :inline="false" size="normal" label-position="top">
      <div v-if="!this.switch">
        <div class="title">
          <span>服务内容</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="服务内容" prop="content">
              <el-input v-model="formData.content" type="textarea" :rows="6"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="title">
        <span>招标技术参数</span>
      </div>
      <div v-for="(item, index) in formData.subjects" :key="index">
        <el-card v-if="item.del_flag==='0'" shadow="always" :body-style="{ padding: '10px 20px' }">
          <el-row :gutter="20">
            <el-button-group>
              <el-button type="primary" size="medium">第 {{item.num}} 条</el-button>
              <el-button type="danger" size="medium" @click="removeTarget(index)">删除</el-button>
            </el-button-group>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="0" :offset="0">
              <el-input v-model="item.sub_id"></el-input>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标项" :prop="`subjects[${index}].target_index_params`"
                :rules="rules.target_index_params">
                <el-input v-model="item.target_index_params" :placeholder="eg1" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标描述" :prop="`subjects[${index}].target_desc_params`"
                :rules="rules.target_desc_params">
                <el-input v-model="item.target_desc_params" :placeholder="eg2" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标要求" :prop="`subjects[${index}].target_require_params`"
                :rules="rules.target_require_params">
                <el-input v-model="item.target_require_params" :placeholder="eg3" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="服务时间" :prop="`subjects[${index}].service_time_params`"
                :rules="rules.service_time_params">
                <el-input v-model="item.service_time_params" placeholder="例：5*8" type="textarea" :rows="2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="服务方式" :prop="`subjects[${index}].service_method_params`"
                :rules="rules.service_method_params">
                <el-select v-model="item.service_method_params" value-key="service_method_params" placeholder="服务方式"
                  class="wid">
                  <el-option v-for="item in d_targetType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="交付成果" :prop="`subjects[${index}].service_result_params`"
                :rules="rules.service_result_params">
                <el-input v-model="item.service_result_params" placeholder="巡检文档" type="textarea" :rows="2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="center" style="margin-top:20px">
        <el-button type="primary" size="default" @click="addTarget">添加新指标</el-button>
        <el-button type="danger" size="default" @click="cancel" :loading="loading">取消</el-button>
        <template v-if="this.switch">
          <el-button type="primary" size="default" @click="onEdit" :loading="loading">保存</el-button>
        </template>
      </div>
    </el-form>
  </div>
</template>
<script>
import { d_targetType } from '@/utils/dicts.js'
export default {
  name: 'TargetVar',
  components: {

  },
  props: {
    targetVarParams: {
      type: Object,
      default: () => {
        return {
          subjects: [
            {
              index: 1,
              num: 1,
              del_flag: '0'
            }
          ]
        }
      }
    },
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      loading: false,
      formData: {
        device_num: '1',
        purchase_price: '0',
        service_pre_amount: '0',
        subjects: [
          {
            index: 1,
            num: 1,
            del_flag: '0'
          }
        ]
      },
      rules: {
        target_index_params: [
          { required: true, message: '请输入指标项', trigger: 'blur' }
        ],
        target_desc_params: [
          { required: true, message: '请输入指标描述', trigger: 'blur' }
        ],
        target_require_params: [
          { required: true, message: '请输入指标要求', trigger: 'blur' }
        ],
        service_time_params: [
          { required: true, message: '请输入服务时间', trigger: 'blur' }
        ],
        service_method_params: [
          { required: true, message: '请选择服务方式', trigger: 'change' }
        ],
        service_result_params: [
          { required: true, message: '请输入交付成果', trigger: 'blur' }
        ]
      },
      otherShow: false,
      d_targetType: d_targetType,
      eg1: '例1：例行巡检\n' + '例2：系统可用性\n' + '例3：故障响应时间\n' + '例4：故障处理时间\n',
      eg2: '例1：工作日早8点半前和下班5点前，完成巡检工作\n' + '例2：提供对中心机房强电系统的技术支持保障，设备常规维护等。保障强电系统稳定运行\n' + '例3：接到故障报警后的响应时间\n' + '例4：故障处理时间\n',
      eg3: '例1：每天2次\n' + '例2：100%\n' + '例3：5分钟\n',
    }
  },
  created () {

  },
  mounted () {
    if (this.targetVarParams.id) {
      this.init()
    }
  },
  methods: {
    async init () {
      const res = await this.$http('blockTargetList', {
        del_flag: '0',
        id: this.targetVarParams.id
      })
      this.formData = res
      if (this.formData.subjects.length == 0) {
        this.formData.subjects.push({
          status: '0',
          num: '1',
          del_flag: '0'
        })
      } else {
        this.formData.subjects.forEach((item, index) => {
          item.num = index + 1
          item.del_flag = '0'
        })
      }

    },
    cancel () {
      this.$emit('cancel')
    },
    async onEdit () {
      this.loading = true
      if (!this.check()) {
        this.loading = false
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {

          const res = await this.$http('blockTargetUp', {
            id: this.targetVarParams.id,
            subjects: this.formData.subjects,
          })
          this.$tips.success(res.errmsg)
          this.loading = false
          this.$emit('cancel')
          this.$emit('init')
        } else {
          this.$tips.error('请检查必填项')
          this.loading = false
          return false;
        }
      });
    },
    check () {
      let check_arr = [...this.formData.subjects]
      check_arr = check_arr.filter(item => {
        return item.del_flag === '0'
      })
      if (check_arr.length < 1) {
        this.$tips.error('请填写至少一条指标项并补全字段')
        return false
      }
      return true
    },
    addTarget () {
      let index = this.formData.subjects.length
      this.formData.subjects.push({
        del_flag: '0',
        index: index + 1
      })
      let num = 1
      this.formData.subjects.forEach((item, index) => {
        if (item.del_flag === '0') {
          item.num = num
          num++
        }
      })
    },
    removeTarget (index) {
      this.formData.subjects[index].del_flag = '1'
      let num = 1
      this.formData.subjects.forEach((item, index) => {
        item.index = index + 1
        if (item.del_flag === '0') {
          item.num = num
          num++
        }
      })
    }
  },
  computed: {

  },
  watch: {
  }
}
</script>
<style lang='scss' scoped>
</style>
